<script setup>
import Button from '../../../libs/Button/Button.vue'
import SvgIcon from '../../../components/SvgIcon.vue'
import Popover from '../../../libs/Popover/Popover.vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { confirm } from '../../../libs/Confirm/confirm'
const store = useStore()
const router = useRouter()
//去登录
const goLogin = () => {
  router.push('/login')
}
//退出登录
const logout = () => {
  confirm('您确定要退出登录吗？').then(() => {
    store.dispatch('sys/logout')
  })
}
//去个人中心
const goProfile = () => {
  router.push('/profile')
}
//去VIP
const goVip = () => {
  router.push('/member')
}
</script>
<template>
  <Popover v-if="$store.getters.userInfo" position="bottom">
    <div class="w-12 h-12 flex justify-between hover:bg-slate-600">
      <img :src="$store.getters.userInfo.avatar" alt="" />
      <div class="flex items-center ml-2">
        <SvgIcon name="down-arrow" class="w-4 h-4" />
      </div>
    </div>
    <template #content>
      <ul class="w-32 p-2 bg-slate-200 rounded-md">
        <li class="flex mb-2" @click="goProfile">
          <SvgIcon name="profile" class="w-6 h-6 mr-2" />
          <span class="flex-1">个人中心</span>
        </li>
        <li class="flex mb-2" @click="logout">
          <SvgIcon name="logout" class="w-6 h-6 mr-2" />
          <span class="flex-1">退出登录</span>
        </li>
        <li class="flex mb-2" @click="goVip">
          <SvgIcon name="vip-profile" class="w-6 h-6 mr-2" />
          <span class="flex-1">升级VIP</span>
        </li>
      </ul>
    </template>
  </Popover>
  <Button
    v-else
    icon="profile"
    type="danger"
    class="w-12 h-12"
    @click="goLogin"
  ></Button>
</template>
